<template>
  <div class="post-list">
    <div class="headerr">
      <h2>最新文章</h2>
      <!-- 只有管理员才可以创建帖子 -->
      <router-link v-if="canCreatePost" to="/create-post">
        <button class="create-post-btn">创建文章</button>
      </router-link>
    </div>

    <ul>
      <li v-for="post in posts" :key="post.id">
        <router-link :to="'/forum/' + post.id">
          <h3>{{ post.title }}</h3>
        </router-link>
        <small>作者：{{ post.userName }} | 时间：{{ post.createTime }}</small>
      </li>
    </ul>

    <!-- 分页 -->
    <div class="pagination">
      <button @click="changePage(currentPage - 1)" :disabled="currentPage <= 1">
        上一页
      </button>
      <span>第 {{ currentPage }} 页</span>
      <button
        @click="changePage(currentPage + 1)"
        :disabled="currentPage >= totalPages"
      >
        下一页
      </button>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "PostList",
  data() {
    return {
      posts: [], // 帖子列表
      currentPage: 1, // 当前页
      totalPages: 1, // 总页数
      pageSize: 10, // 每页显示的帖子数
    };
  },
  mounted() {
    this.loadPosts(); // 加载数据
  },
  computed: {
    // 判断当前用户是否为管理员
    canCreatePost() {
      const currentUser = this.$store.state.user && this.$store.state.user.user;
      return currentUser && currentUser.permission === "1"; // 假设"1"是管理员权限
    },
  },
  methods: {
    loadPosts() {
      request
        .get("/forum/selectAll", {
          params: {
            page: this.currentPage, // 当前页
            size: this.pageSize, // 每页显示的帖子数
          },
        })
        .then((res) => {
          this.posts = res.data; // 返回的帖子数据
          this.totalPages = res.totalPages; // 返回的总页数
        })
        .catch((err) => {
          console.error("加载帖子失败:");
        });
    },
    changePage(page) {
      if (page > 0 && page <= this.totalPages) {
        this.currentPage = page;
        this.loadPosts(); // 加载新的页数据
      }
    },
  },
};
</script>

<style scoped>
.post-list { 
  background-color: white;
  padding: 20px;
  width: 90%;
  max-width: 1200px;
  margin: 30px auto;
  box-sizing: border-box; /* 防止padding影响宽度 */
}
.headerr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.create-post-btn {
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.create-post-btn:hover {
  background-color: #45a049;
}
.post-list ul {
  list-style: none;
  padding: 0;
}
.post-list li {
  border-bottom: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
  transition: background-color 0.3s ease;
}
.post-list li:hover {
  background-color: #f1f1f1;
}
.post-list h3 {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 5px;
}
.post-list small {
  font-size: 0.9rem;
  color: #888;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.pagination button {
  padding: 8px 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 10px;
}
.pagination button:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}
.pagination span {
  font-size: 1rem;
  color: #333;
}
</style>
